import QtQuick 2.11
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.11
import FluentUI

/** EMFlickableImage.qml
  *  用于渲染处理图像，提供一些简单的大图浏览操作包含:
  *    放大、缩小、还原、拖拉
  *  组建使用上，需要设置width, height, imagePath三个属性，其他交由组建自己维护
  */

FluPage{
    id: root
    property string imagePath: ""
    property real imageScale: 1.0
    property real bestScale: 1.0
    property real limitMaxScale: 3.0
    property real limitMinScale: 0.2

    // 图像区域
    Flickable {
        id: flickableImage
        anchors.fill: parent  // 操作区域
        clip: true  // 超出裁切
        contentHeight: image.height  // 目标高度
        contentWidth: image.width  // 目标宽度
        boundsBehavior: Flickable.StopAtBounds
        ScrollBar.vertical: FluScrollBar{  // 滚动条
            anchors.right: flickableImage.right
            anchors.rightMargin: 1
        }
        ScrollBar.horizontal: FluScrollBar{
            anchors.bottom: flickableImage.bottom
            anchors.bottomMargin: 1
        }

        FluImage {
            id: image
            source: imagePath
            asynchronous: true

            transformOrigin: Item.Center
            transform: Scale {
                id: scale
                xScale: imageScale
                yScale: imageScale
            }

            // 初始时计算合适的缩放比
            onStatusChanged: {
                if(status === Image.Ready){
                    var xScale = image.width / root.width
                    var yScale = image.height / root.height

                    var maxScale = Math.max(xScale, yScale)
                    if (maxScale > 1.0){
                        imageScale = Math.max(limitMinScale, 1 / maxScale)
                    }else{
                        imageScale = Math.min(limitMaxScale, 1 / maxScale)
                    }
                    bestScale = imageScale
                    resetFlickable()
                }
            }
        }
    }

    // 操作区域
    Row{
        anchors.top: flickableImage.bottom
        anchors.horizontalCenter: root.horizontalCenter

        spacing: 0

        FluIconButton{
            iconSource: FluentIcons.CalculatorAddition
            onClicked: {
                if(imageScale < limitMaxScale){
                    imageScale += 0.2
                    resetFlickable()
                }else{
                    imageScale = limitMaxScale
                }
            }
        }

        FluIconButton{
            iconSource: FluentIcons.CalculatorSubtract
            onClicked: {
                if(imageScale > Math.max(limitMinScale, bestScale)){
                    imageScale -= 0.2
                    resetFlickable()
                }else{
                    imageScale = Math.max(limitMinScale, bestScale)
                }
                // console.log(imageScale, Math.max(0.2, bestScale))
            }
        }

        FluIconButton{
            iconSource: FluentIcons.UpdateRestore
            onClicked: {
                imageScale = bestScale
                resetFlickable()
            }
        }
    }


    function resetFlickable(){
        flickableImage.contentWidth = Math.round(image.width * root.imageScale)
        flickableImage.contentHeight = Math.round(image.height * root.imageScale)
    }

}
